<template>
<!--  <div id="demo">{{ fullName }}</div>-->
  <div>
    <p style = "font-size:25px;">计数器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">点我+1</button>

    <button   :disabled="isDisabledStop"  @click ="stop" style = "font-size:25px;">停止</button>
    <button  :disabled="isDisabled" @click ="goOn" style = "font-size:25px;">继续</button>
  </div>
</template>

<script>

  export default {
    name: "WatchTest",
    data(){
      return{
        counter:1,
        timer: null,  // 定时器名称
        isDisabled:true,
        isDisabledStop:false

      }
    },
    methods:{

      incre(){
        this.counter += 2;
        console.log('定时器执行了!!! counter: '+this.counter)
      },

      stop(){
        console.log('点击了停止按钮')
        clearInterval(this.timer);
        this.isDisabledStop = true;
        this.isDisabled = false;
      },

      goOn(){
        console.log('点击了继续按钮')
        this.timer = setInterval(this.incre, 1000);
        this.isDisabledStop = false;
        this.isDisabled = true;
      }

    },

    watch:{
      counter: function(nval , oval){
        console.log('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
        // alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
      },

    },
    mounted() {
      //Vue中使用定时器setInterval和setTimeout
      //https://www.cnblogs.com/jin-zhe/p/10001236.html

      //页面初始化时候创建一个定时器setTimeout，只在1秒后执行一次方法。
      // this.timer = setTimeout(this.incre, 1000);

      //页面初始化的时候创建了一个定时器setInterval，时间间隔为1秒，每一秒都会调用一次函数get，从而使value的值加一。
      this.timer = setInterval(this.incre, 1000);
    },
    beforeDestroy() {
      //离开当前组件时销毁定时器
      // clearTimeout(this.timer);
      clearInterval(this.timer);
      this.timer = null;
      console.log('定时器销毁了!!!')
    }

  }
</script>

<style scoped>

</style>
